<template>
  <transition name="fadeIn">
    <div v-if="show"  @click="close" class="popover-mask" @touchmove.prevent></div>
  </transition>
  <transition name="fadeIn">
    <div v-if="show" class="pop-comfirm" @touchmove.prevent>
      <div class="tips">可前往PC端体验产品，效果更佳。是否继续在移动端体验？</div>
      <div class="btn-box">
        <div class="btn cancel" @click="close">取消</div>
        <div class="btn confirm" @click="confrim">继续体验</div>
      </div>
    </div>
  </transition>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:show', 'confirm'])

const close = () => {

  emits('update:show', false)

}

const confrim = () => {

  emits('confirm')
  close()

}


</script>

<style lang="stylus" scoped>
@import '~/styles/common.styl';
.popover-mask
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 999
  background rgba(0,0,0,0.6)
.pop-comfirm
  width 240px
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 1000
  background #fff
  padding 25px 24px 24px
  border-radius 8px
  .tips
    font-size 14px
    font-weight 400
    color #363B52
    line-height 26px
  .btn-box
    {flexBox}
    justify-content space-between
    margin-top 32px
    font-size 14px
    font-weight 400
    line-height 20px
    .btn
      {flexBox}
      width 92px
      height 32px
      border-radius 20px
    .cancel
      background #F7F7F7
      color #363B52
    .confirm
      background #FF7626
      color #FFFFFF

.fadeIn-enter-active,
.fadeIn-leave-active
  transition opacity 0.5
.fadeIn-enter-from
  opacity 0


</style>